import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import IconFont from "../../../../components/IconFont";
import { pxToDp } from '../../../../utils/stylesKits';
import SvgUri from "react-native-svg-uri";
import { male, female } from "../../../../res/font/iconSvg";
import { Slider } from "react-native-elements";
import THButton from "../../../../components/THButton";

class Index extends Component {

    constructor(props) {
        super(props);
        this.state = JSON.parse(JSON.stringify(this.props.params));
    }

    // 选择性别
    chooseGender = (gender) => {
        if (gender === this.state.gender) {
            gender = '';
        }
        this.setState({ gender })
    }

    // 点击确定 要执行的方法
    handleSubmitFilter = () => {
        // 提交数据
        this.props.onSubmitFilter(this.state);
        // 关闭浮层
        this.props.onClose();
    }

    render() {
        const { gender, distance } = this.state;
        return (
            <View
                style={{ position: 'absolute', width: '100%', height: '50%', left: 0, bottom: 0, backgroundColor: '#fff', padding: pxToDp(10) }}>
                {/* 标题 */}
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', height: pxToDp(50) }}>
                    <Text></Text>
                    <Text style={{ color: '#999', fontSize: pxToDp(22), fontWeight: 'bold' }}>筛选</Text>
                    <IconFont onPress={this.props.onClose} style={{ fontSize: pxToDp(22) }} name="iconshibai" />
                </View>

                {/* 性别 */}
                <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: pxToDp(20) }}>
                    <Text style={{ color: '#777', fontSize: pxToDp(18), width: pxToDp(80) }}>性别：</Text>
                    {/* 图标 */}
                    <View style={{ justifyContent: 'space-between', width: '56%', flexDirection: 'row' }}>
                        <TouchableOpacity onPress={this.chooseGender.bind(this, '男')} style={{ width: pxToDp(70), height: pxToDp(70), borderRadius: pxToDp(35), backgroundColor: gender === '男' ? 'red' : '#eee', justifyContent: 'center', alignItems: 'center' }}>
                            <SvgUri svgXmlData={male} width="40" height="40" />
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.chooseGender.bind(this, '女')} style={{ width: pxToDp(70), height: pxToDp(70), borderRadius: pxToDp(35), backgroundColor: gender === '女' ? 'red' : '#eee', justifyContent: 'center', alignItems: 'center' }}>
                            <SvgUri svgXmlData={female} width="40" height="40" />
                        </TouchableOpacity>
                    </View>
                </View>

                {/* 距离 */}
                <View style={{ marginTop: pxToDp(30) }}>
                    <Text style={{ color: '#777', fontSize: pxToDp(18), marginBottom: pxToDp(20) }}>距离：{distance || 0} m</Text>
                    <Slider
                        value={distance}
                        minimumValue={0}
                        maximumValue={100000}
                        step={1}
                        onValueChange={(distance) => this.setState({ distance })}
                    />
                </View>

                {/* 确认按钮 */}
                <View style={{ width: '100%', alignItems: 'center', marginTop: pxToDp(40) }}>
                    <THButton
                        style={{ width: '80%', height: pxToDp(50) }}
                        onPress={this.handleSubmitFilter}
                    >确认</THButton>
                </View>
            </View>
        );
    }
}

export default Index;